<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
import MyCesium from "@/utils/cesium";
import * as Cesium from "cesium";
import  ImageryProvider from "./js/ImageryProvider";
import addLeftClickBillboardEvent from "./js/BindEvents";
import AddBillbroad from "./js/addBillbroad";

//设置相机初始位置
function setCameraPosition(viewer) {
  // 设置初始位置  Cesium.Cartesian3.fromDegrees(longitude, latitude, height, ellipsoid, result)
  const boundingSphere = new Cesium.BoundingSphere(
    Cesium.Cartesian3.fromDegrees(114.30527350657182, 30.59595484998685, 0),
    100
  );
  // 定位到初始位置
  viewer.camera.flyToBoundingSphere(boundingSphere, {
    duration: 1,  // 定位到初始位置的过渡时间，设置成0，就没有过渡，类似一个过场的动画时长
  });
}

const init = () => {
  const myCesium = new MyCesium("cesiumContainer");
  const viewer = myCesium.viewer;
  // 新增高德影像
  const imageryProvider = new ImageryProvider(viewer);
  imageryProvider.loadGaodeImagery()

  setCameraPosition(viewer); // 设置相机初始位置
  const events =  new addLeftClickBillboardEvent(viewer);   // 绑定事件
  const billboardInstance =  new AddBillbroad(viewer);   // 新增物体
};

onMounted(() => {
  init();
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
  /* 子盒子相对定位 */
  position: relative;
  /**子盒子超出隐藏 */
  overflow: hidden;
}
</style>
